<template>
  <div class="Edition">
    <!-- 版本发布单 -->
    <div v-if="false">
      <div class="search_box">
        <el-date-picker
          @change="changeOne"
          v-model="week"
          type="week"
          placeholder="选择周"
          format="YYYY第ww周"
        >
        </el-date-picker>
      </div>
      <div class="inside">
        <div class="leftBox">
          <div id="Echartone" :class="text ? 'borderColor' : ''">
            <p class="wz">
              {{ VmbizCount?.successRate ? ChangeDecimalToPercentage(VmbizCount.successRate) : '' }}
              <!--     {{ ChangeDecimalToPercentage("100%") }} -->
            </p>
            <p>升级成功率</p>
          </div>
          <div id="Echarttwo" :class="value1 ? 'borderColor' : ''">
            <p class="wz">
              {{
                VmbizCount?.automateRate ? ChangeDecimalToPercentage1(VmbizCount.automateRate) : ''
              }}
              <!-- {{ ChangeDecimalToPercentage("暂无数据") }} -->
            </p>
            <p>自动化部署率</p>
          </div>
        </div>
        <div class="rightBox">
          <div id="charts"></div>
        </div>
      </div>
      <div class="footer">
        <div class="left">
          <p class="Cltitle">审批中</p>
          <p class="Clbox">
            <!--  {{ underApprovalCount }} -->
            {{ VmbizCount?.underApprovalCount ?? 0 }}
          </p>
        </div>
        <div class="rightBox">
          <p class="Jjtitle">已发布</p>
          <p class="Jjbox">
            <!--  {{ unDownloadCount + completeCount + evaluateCount }} -->
            {{ published }}
          </p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="leftcontent">
        <div class="search_box">
          <el-date-picker
            @change="changeOne"
            v-model="week"
            type="week"
            placeholder="选择周"
            format="YYYY第ww周"
          >
          </el-date-picker>
        </div>
        <div class="percentage">
          <div class="ring">
            <el-progress
              type="circle"
              :percentage="VmbizCount.successRate ? VmbizCount.successRate : 0"
              :width="69"
              color="#27D7AF"
              :stroke-width="8"
              stroke-linecap="line"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
            <p>升级成功率</p>
          </div>
          <div class="ring">
            <el-progress
              type="circle"
              :percentage="VmbizCount.automateRate ? VmbizCount.automateRate : 0"
              :width="69"
              color="#27D7AF"
              :stroke-width="8"
              stroke-linecap="line"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
            <p>自动化率</p>
          </div>
          <div class="ring">
            <el-progress
              type="circle"
              :percentage="VmbizCount.abnormalRate ? VmbizCount.abnormalRate : 0"
              :width="69"
              color="#27D7AF"
              :stroke-width="8"
              stroke-linecap="line"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
            <p>异常处置占比</p>
          </div>
          <div class="ring">
            <el-progress
              type="circle"
              :percentage="VmbizCount.urgencyRate ? VmbizCount.urgencyRate : 0"
              :width="69"
              color="#27D7AF"
              :stroke-width="8"
              stroke-linecap="line"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
            <p>紧急升级占比</p>
          </div>
        </div>
        <div class="exception">
          <div class="exceptionLeft">
            <div class="exception_item">
              <p>
                <span>审批中</span>
                <span style="color: #0079f5">{{
                  VmbizCount.underApprovalCount ? VmbizCount.underApprovalCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.underApprovalRate ? VmbizCount.underApprovalRate : 0"
                color="#0079f5"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>已发布</span>
                <span style="color: #27d7af">{{
                  VmbizCount.approvalCount ? VmbizCount.approvalCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.approvalRate ? VmbizCount.approvalRate : 0"
                color="#27d7af"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>实施中</span>
                <span style="color: #a95fff">{{
                  VmbizCount.implementCount ? VmbizCount.implementCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.implementRate ? VmbizCount.implementRate : 0"
                color="#A95FFF"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>正常完成</span>
                <span style="color: #89c997">{{
                  VmbizCount.zcimplementCount ? VmbizCount.zcimplementCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.zcimplementRate ? VmbizCount.zcimplementRate : 0"
                color="#89C997"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>升级异常</span>
                <span style="color: #ffbb37">{{
                  VmbizCount.ycimplementCount ? VmbizCount.ycimplementCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.ycimplementRate ? VmbizCount.ycimplementRate : 0"
                color="#FFBB37"
              />
            </div>
          </div>
          <div class="exceptionRight">
            <div class="exception_item">
              <p>
                <span>已下载</span>
                <span style="color: #0079f5">{{
                  VmbizCount.donwoldCount ? VmbizCount.donwoldCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.donwoldRate ? VmbizCount.donwoldRate : 0"
                color="#0079f5"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>操作已完成</span>
                <span style="color: #933503">{{
                  VmbizCount.czwcCount ? VmbizCount.czwcCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.czwcRate ? VmbizCount.czwcRate : 0"
                color="#933503"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>健康检查已完成</span>
                <span style="color: #a95fff">{{
                  VmbizCount.jkjcCount ? VmbizCount.jkjcCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.jkjcRate ? VmbizCount.jkjcRate : 0"
                color="#A95FFF"
              />
            </div>
            <div class="exception_item">
              <p>
                <span>业务验证已完成</span>
                <span style="color: #fb6f5d">{{
                  VmbizCount.ywyzCount ? VmbizCount.ywyzCount : 0
                }}</span>
              </p>
              <el-progress
                :stroke-width="8"
                :percentage="VmbizCount.ywyzRate ? VmbizCount.ywyzRate : 0"
                color="#FB6F5D"
              />
            </div>
            <div class="exception_item"> </div>
          </div>
        </div>
        <!-- <div id="mychart" v-if="false"></div> -->
      </div>
      <div class="rightcontent">
        <p class="current_time">当前时间统计</p>
        <div class="typeCount">
          <div class="module">
            <div class="situation">
              <span class="typeNum" style="color: #0079f5">{{
                VmbizCount.monthCount ? VmbizCount.monthCount : 0
              }}</span>
              <span class="type" style="color: #0079f5">当月已发布</span>
            </div>
            <div class="situation">
              <span class="typeNum" style="color: #5d676d">{{
                VmbizCount?.yearCount ? VmbizCount?.yearCount : 0
              }}</span>
              <span class="type" style="color: #5d676d">全年已发布</span>
            </div>
          </div>
          <div class="module" style="background: rgba(193, 118, 61, 0.1); cursor: pointer">
            <div class="situation" @click="goEdition('5', '4')">
              <span class="typeNum" style="color: #c1763d">{{
                VmbizCount?.ywyzwwcCount ? VmbizCount?.ywyzwwcCount : '0'
              }}</span>
              <span class="type title_long" style="color: #c1763d">业务验证结果未填报完成</span>
            </div>
            <div class="situation" @click="goEdition('6', '1')">
              <span class="typeNum" style="color: #c1763d">{{
                VmbizCount?.fiveCount ? VmbizCount?.fiveCount : '0'
              }}</span>
              <span class="type" style="color: #c1763d">超5:00未填报完成</span>
            </div>
          </div>
          <div class="module" style="background: rgba(93, 103, 109, 0.1); cursor: pointer">
            <div class="situation" @click="goEdition('7', '2')">
              <span class="typeNum" style="color: #5d676d">{{
                VmbizCount?.czcsCount ? VmbizCount?.czcsCount : '0'
              }}</span>
              <span class="type title_long" style="color: #5d676d">超过填报的计划完成时间</span>
            </div>
            <div class="situation" @click="goEdition('8', '3')">
              <span class="typeNum" style="color: #5d676d">{{
                VmbizCount?.forCount ? VmbizCount?.forCount : '0'
              }}</span>
              <span class="type" style="color: #5d676d">超过4:00未完成</span>
            </div>
          </div>
          <div class="module">
            <div
              class="situation"
              style="background: rgba(39, 215, 175, 0.1); cursor: pointer"
              @click="goEdition('7', '2')"
            >
              <span class="typeNum" style="color: #27d7af">{{
                VmbizCount?.cswxzCount ? VmbizCount?.cswxzCount : '0'
              }}</span>
              <span class="type" style="color: #27d7af">超时未下载</span>
            </div>
            <div
              class="situation"
              style="background: rgba(251, 111, 93, 0.1); cursor: pointer"
              @click="goEdition('8', '3')"
            >
              <span class="typeNum" style="color: #fb6f5d">{{
                VmbizCount?.jkjcwwcCount ? VmbizCount?.jkjcwwcCount : '0'
              }}</span>
              <span class="type" style="color: #fb6f5d">健康检查未完成</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { watch, ref, onMounted } from 'vue'; // reactive,
  import { useRouter } from 'vue-router';
  import moment from 'moment';
  import { selectVmBizInfoCount } from '@/http/api';
  import { useStore } from 'vuex';
  const store = useStore();
  const router = useRouter();
  const props = defineProps({
    //是否为预览模式
    changeTime: {
      type: Number,
      default: 0
    }
  });
  const startTime = ref('');
  const endTime = ref('');
  const startTimeStamp = ref('');
  const endTimeStamp = ref('');
  const week = ref('');
  // const { proxy } = getCurrentInstance() as any;
  // const myChart = ref<HTMLElement>();
  const text = ref(false);
  const value1 = ref(false);
  const VmbizCount = ref();
  // const published = ref('');
  onMounted(() => {
    getCurrWeekDays();
    getVmbizCount(startTime.value, endTime.value);
    // barBox();
  });
  const getCurrWeekDays = () => {
    let date = [];
    let weekOfday = parseInt(moment().format('d')); // 计算今天是这周第几天 周日为一周中的第一天
    let start = moment().subtract(weekOfday, 'days').format('YYYYMMDD'); // 周一日期
    let end = moment()
      .add(7 - weekOfday - 1, 'days')
      .format('YYYYMMDD'); // 周日日期
    date.push(start);
    date.push(end);

    startTime.value = start;
    endTime.value = end;
    return date;
  };
  // const barBox = () => {
  //   if (myChart.value != null && myChart.value != '' && myChart.value != undefined) {
  //     myChart.value.dispose();
  //   }
  //   myChart.value = proxy.$ECharts.init(document.getElementById('mychart'));
  //   var option;

  //   option = {
  //     tooltip: {
  //       trigger: 'axis',
  //       axisPointer: {
  //         type: 'shadow'
  //       }
  //     },
  //     grid: {
  //       top: '10',
  //       bottom: '10',
  //       left: '70'
  //     },
  //     xAxis: {
  //       type: 'value',
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         show: false
  //       },
  //       splitLine: {
  //         show: false
  //       }
  //     },
  //     yAxis: {
  //       type: 'category',
  //       axisTick: {
  //         show: false
  //       },
  //       data: [
  //         {
  //           value: '升级异常',
  //           textStyle: {
  //             color: '#46545D',
  //             fontSize: 14
  //           }
  //         },
  //         {
  //           value: '已评价',
  //           textStyle: {
  //             color: '#46545D',
  //             fontSize: 14
  //           }
  //         },
  //         {
  //           value: '已完成',
  //           textStyle: {
  //             color: '#46545D',
  //             fontSize: 14
  //           }
  //         },
  //         {
  //           value: '待操作',
  //           textStyle: {
  //             color: '#46545D',
  //             fontSize: 14
  //           }
  //         }
  //       ],
  //       axisLine: {
  //         show: false
  //       }
  //     },
  //     series: [
  //       {
  //         // name: "Profit",
  //         type: 'bar',
  //         barWidth: '10',
  //         label: {
  //           show: true,
  //           position: 'right',
  //           color: '#46545D',
  //           fontSize: 14
  //         },
  //         showBackground: true,
  //         backgroundStyle: {
  //           color: 'rgba(180, 180, 180, 0.2)',
  //           borderRadius: 5
  //         },
  //         itemStyle: {
  //           borderRadius: 5
  //         },

  //         data: [
  //           {
  //             //value: this.exceptionCount ? this.exceptionCount : '0', // 升级异常
  //             value: VmbizCount?.value?.exceptionCount ? VmbizCount?.value?.exceptionCount : '0',
  //             // value: '100',
  //             itemStyle: {
  //               color: '#FC6F5E'
  //             }
  //           },
  //           {
  //             //value: this.evaluateCount ? this.evaluateCount : '0', // 已评价
  //             value: VmbizCount?.value?.evaluateCount ? VmbizCount?.value?.evaluateCount : '0',
  //             //value: '50',
  //             itemStyle: {
  //               color: '#AA5FFF'
  //               //    borderRadius: [5, 5, 5, 5],
  //             }
  //           },

  //           {
  //             // value: this.completeCount ? this.completeCount : '0', // 已完成
  //             value: VmbizCount?.value?.completeCount ? VmbizCount?.value?.completeCount : '0',
  //             //value: '30',
  //             itemStyle: {
  //               color: '#27D7B0'
  //             }
  //           },
  //           {
  //             // value: this.unDownloadCount ? this.unDownloadCount : '0', // 待下载
  //             value: VmbizCount?.value?.unDownloadCount ? VmbizCount?.value?.unDownloadCount : '0',
  //             // value: '40',
  //             itemStyle: {
  //               color: '#FFBB37'
  //             }
  //           }
  //         ]
  //       }
  //     ]
  //   };

  //   option && myChart.value.setOption(option);
  //   myChart.value.getZr().on('click', (params) => {
  //     const pointInPixel = [params.offsetX, params.offsetY];
  //     if (myChart.value.containPixel('grid', pointInPixel)) {
  //       let xIndex = myChart.value.convertFromPixel({ seriesIndex: 0 }, [
  //         params.offsetX,
  //         params.offsetY
  //       ])[1];
  //       if (xIndex == '3') {
  //         router.push({
  //           name: 'edition',
  //           params: {
  //             // type: '1',
  //             Index: '1',
  //             startTime: startTime.value,
  //             endTime: endTime.value
  //           }
  //         });
  //       } else if (xIndex == '2') {
  //         router.push({
  //           name: 'edition',
  //           params: {
  //             // type: '3',
  //             Index: '2',
  //             startTime: startTime.value,
  //             endTime: endTime.value
  //           }
  //         });
  //       } else if (xIndex == '1') {
  //         router.push({
  //           name: 'edition',
  //           params: {
  //             // type: '4',
  //             Index: '3',
  //             startTime: startTime.value,
  //             endTime: endTime.value
  //           }
  //         });
  //       } else if (xIndex == '0') {
  //         router.push({
  //           name: 'edition',
  //           params: {
  //             // type: '2',
  //             Index: '4',
  //             startTime: startTime.value,
  //             endTime: endTime.value
  //           }
  //         });
  //       }
  //     }
  //   });
  // };
  const ChangeDecimalToPercentage = (data) => {
    let data2 = parseFloat(data).toFixed(2);
    let data1 = parseFloat(data).toFixed(2) + '%';
    if (data2 == '0.00' || data1 == 'NaN%') {
      text.value = true;
      return '暂无数据';
    } else {
      let data1 = parseFloat(data).toFixed(2) + '%';
      if (data1 == 'NaN%') {
        text.value = true;

        return data;
      } else {
        text.value = false;

        return data1;
      }
    }
  };
  const ChangeDecimalToPercentage1 = (data) => {
    let data2 = parseFloat(data).toFixed(2);
    let data1 = parseFloat(data).toFixed(2) + '%';
    if (data2 == '0.00' || data1 == 'NaN%') {
      value1.value = true;
      return '暂无数据';
    } else {
      let data1 = parseFloat(data).toFixed(2) + '%';
      if (data1 == 'NaN%') {
        value1.value = true;
        return data;
      } else {
        value1.value = false;

        return data1;
      }
    }
  };
  const changeOne = (val) => {
    let timeStamp = val.getTime(); //标准时间转为时间戳，毫秒级别
    startTimeStamp.value = Timetransform(timeStamp - 24 * 60 * 60 * 1000); //开始时间
    endTimeStamp.value = Timetransform(timeStamp + 24 * 60 * 60 * 1000 * 5); //结束时间
    endTime.value = endTimeStamp.value;
    startTime.value = startTimeStamp.value;
    getVmbizCount(startTime.value, endTime.value);
  };
  const Timetransform = (unixtimest: Number) => {
    let unixtimestamp = new Date(unixtimest);
    let year = 1900 + unixtimestamp.getYear();
    let month = '0' + (unixtimestamp.getMonth() + 1);
    let date = '0' + unixtimestamp.getDate();
    // let hour = "0" + unixtimestamp.getHours();
    // let minute = "0" + unixtimestamp.getMinutes();
    // let second = "0" + unixtimestamp.getSeconds();
    return (
      year +
      month.substring(month.length - 2, month.length) +
      date.substring(date.length - 2, date.length)
    );
  };
  const getVmbizCount = (startTime: string, endTime: striing) => {
    selectVmBizInfoCount({
      startTime: startTime,
      endTime: endTime
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      VmbizCount.value = res.data.data;
      // published.value =
      //   VmbizCount.value.unDownloadCount +
      //   VmbizCount.value.completeCount +
      //   VmbizCount.value.evaluateCount;
      // barBox();
    });
  };
  const goEdition = (num_index) => {
    // type_count
    store.commit('setTime', { startTime: startTime.value, endTime: endTime.value });
    router.push({
      name: 'edition',
      params: {
        // type: type_count,
        Index: num_index,
        startTime: startTime.value,
        endTime: endTime.value
      }
    });
  };
  watch(
    () => props.changeTime,
    () => {
      getCurrWeekDays();
      getVmbizCount(startTime.value, endTime.value);
    }
  );
</script>

<style scoped lang="less">
  .Edition {
    width: 100%;
    height: 90%;
    //height: 100%;
    .main {
      //  width: 60%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      .leftcontent {
        width: 60%;
        .search_box {
          width: 100%;
          height: 37px;
          line-height: 37px;
          font-size: 16px;
          color: #fff;
          display: flex;
          margin-bottom: 5px;
          box-sizing: border-box;
          :deep(.el-date-editor) {
            width: 100%;
            :deep (.el-input__wrapper ) {
              width: 100%;
              // margin: auto 0;
            }
          }
        }
        .percentage {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .Success_rate,
          .Emergency_change {
            width: 49.5%;
            // height: 100%;
            box-sizing: border-box;
            padding: 10px 8px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .title_tip {
              font-weight: 400;
            }
            .Num {
              font-weight: bold;
            }
          }
        }
        #mychart {
          width: 100%;
          height: calc(100% - 77px);
        }
      }
      .rightcontent {
        width: 38%;

        .current_time {
          margin: 0;
          padding: 0;
          line-height: 37px;
          font-size: 16px;
          font-weight: bold;
          color: #46545d;
          margin-bottom: 5px;
          box-sizing: border-box;
        }
        .typeCount {
          height: calc(100% - 37px);
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          .situation {
            height: 32%;
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .typeNum {
              text-align: center;
              font-size: 18px;
              font-weight: 600;
            }
            .type {
              font-size: 12px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
</style>
